
import { Space } from 'antd-mobile';
import { EditSOutline, DeleteOutline } from 'antd-mobile-icons';
import './hobby.scss';
import type { HobbyProps } from '../../../../type/CustomerState';
import Delete from './delete/Delete';
import { useState } from 'react';
import { useDispatch } from 'react-redux';
import { clearCustomerData } from '../../../../store/CustomerSlice';
import { useNavigate } from 'react-router-dom';

function Hobby(props: HobbyProps) {
  const { item: customerList } = props;
  const navigate = useNavigate();
  //导航&mask
  const [showDelete, setShowDelete] = useState<boolean>(false);
  const [currentId, setCurrentId] = useState<string | null>(null);
  const dispatch = useDispatch();
  const handleCancel = () => {
    setShowDelete(false);
  };
  // 显示删除确认框并记录当前要删除的ID
  const handleBackClick = (id: string) => {
    console.log(customerList, id)
    setShowDelete(true);
  };
  const handleConfirmDelete = () => {
    console.log(currentId)
    if (currentId) {
      dispatch(clearCustomerData(currentId));//删除对应项
    }
    setShowDelete(false);
    setCurrentId(null);
  };
const handleEditClick=(id?: string)=>{
    navigate(`/customer/${id}`);

}
  return (
    <div className="hobbies">
      {customerList && customerList.map((customer, index) => (
        <div key={index} className="hobby">
          <div className="information">
            <div className="info">
              <h4>
                {customer.name}
                ({customer.gender[0]})
                -
                {customer.position}
              </h4>
              <div className="btn">
                <span className="button edit-btn">
                  <Space wrap style={{ fontSize: 18, fontWeight: 'bolder', marginRight: 10 }}>
                    <EditSOutline
                    onClick={() => handleEditClick(customer.id)}
                    />
                  </Space>
                </span>

                <span className="button delete-btn">
                  <Space wrap style={{ fontSize: 16 }}>
                    <DeleteOutline
                      onClick={() => handleBackClick(customer.id)}
                    />
                  </Space>

                  <Delete
                    visible={showDelete}
                    title="删除"
                    message="确定删除此重要客户喜好&禁忌吗?"
                    onCancel={handleCancel}
                    onConfirm={handleConfirmDelete}
                  />
                </span>
              </div>
            </div>

            <div className="tell">
              <p>{customer.tel ? customer.tel : '无'}</p>
            </div>
          </div>

          <div className="detail">
            <p>用餐：{customer.dinner[0] === '有' ? customer.dinnerDetail : '无'}</p>
            <p>住宿：{customer.accommodation[0] === '有' ? customer.accommodationDetail : '无'}</p>
            <p>用车：{customer.car[0] === '有' ? customer.carDetail : '无'}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

export default Hobby;

